<template>
    <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
    <el-table
     :data="filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" style="width: 100%"
      >
     <el-table-column prop="date" label="Date" />
     <el-table-column prop="name" label="Name"/>
     <el-table-column prop="address" label="Address" />
    <!-- 添加输入框 -->
     <el-table-column align="right">
       <template #header>
         <el-input v-model="search" size="small" placeholder="Type to search" />
       </template>
     </el-table-column>
    <!-- 添加输入框 -->
    </el-table>
    <!-- 设置导航 -->
    <!-- 修改下面得属性 -->
    <el-pagination
     layout="total, sizes, prev, pager, next, jumper"
     :total="tableData.length"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page="currentPage4"
    />
    </template>
    <script lang="ts" setup>
    import { ref,computed } from "vue";
    // 设置需要的参数与方法
    const currentPage4 = ref(1);
    const pageSize4 = ref(10);
    const search = ref('')
    // 使用计算属性处理数据
    const filterTableData = computed(() =>
    tableData.filter(
     (data) =>
       !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
    )
    )
    // 修改下面得方法
    const handleSizeChange = (val: number) => {
      //一页显示多少条
      pageSize4.value = val;
    };
    const handleCurrentChange = (val: number) => {
      //页码更改方法
      currentPage4.value = val;
    };
    const tableData = [
    {
     date: "2016-05-03",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-02",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-04",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "aa",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "bb",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    {
     date: "2016-05-01",
     name: "Tom",
     address: "No. 189, Grove St, Los Angeles",
    },
    ];
    </script>
    <style>
</style>